<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>供水总览</title>
  <link rel="stylesheet" href="../css/global.css">
  <link rel="stylesheet" href="../css/waterPendect.css">
  <link rel="stylesheet" href="../css/element-ui/lib/theme-chalk/index.css">
  <script src="../js/vue.js"></script>
  <script src="../css/element-ui/lib/index.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/echarts.js"></script>
</head>

<body>
  <div id="app">
    <el-row :gutter="16" class="el-row">
      <el-col :span="8">
        <div class="equipmentStatistics">
          <div class="plateTitle">
            <span>设备统计</span>
          </div>
          <div class="childrenPlate">
            <div class="itemPlate pumpHouseTotal">
              <div class="dataShow">
                {{equipmentStatistics.onLineEquipment+ equipmentStatistics.offLineEquipment}}
              </div>
              <div class="dataTitle">
                票房总数
              </div>
            </div>
            <div class="itemPlate">
              <div class="dataShow">
                {{equipmentStatistics.onLineEquipment}}
              </div>
              <div class="dataTitle">
                在线设备
              </div>
            </div>
            <div class="itemPlate">
              <div class="dataShow">
                {{equipmentStatistics.onLineEquipment+ equipmentStatistics.offLineEquipment}}
              </div>
              <div class="dataTitle">
                离线设备
              </div>
            </div>
            <div class="itemPlate todayAlarmTotal">
              <div class="dataShow">
                {{equipmentStatistics.onLineEquipment+ equipmentStatistics.offLineEquipment}}
              </div>
              <div class="dataTitle">
                今日报警
              </div>
            </div>
            <div class="itemPlate">
              <div class="dataShow">
                {{equipmentStatistics.onLineEquipment+ equipmentStatistics.offLineEquipment}}
              </div>
              <div class="dataTitle">
                一般报警
              </div>
            </div>
            <div class="itemPlate">
              <div class="dataShow">
                {{equipmentStatistics.onLineEquipment+ equipmentStatistics.offLineEquipment}}
              </div>
              <div class="dataTitle">
                严重报警
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="plate2">
          <div class="plateTitle">
            <div class="plate2Top">
              <div class="plate2TopTitle">智能门禁覆盖率</div>
              <div class="smartentranceGuradCoverRate">
                <div id="entranceGuardEcharts" style="width: 30%; height:100%;display: inline-block;"></div>
                <div class="guadualChangeColor">
                  <div class="entranceGuard">
                    <div class="showData">
                      {{entranceGuardAndMonitoring.installedEntranceGuard}}
                    </div>
                    <div class="showDataTitle">
                      已安装门禁
                    </div>
                  </div>
                  <div class="entranceGuard">
                    <div class="showData">
                      {{entranceGuardAndMonitoring.uninstalledEntranceGuard}}
                    </div>
                    <div class="showDataTitle">
                      未安装门禁
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="plate2Top">
              <div class="plate2Bottom">监控覆盖率</div>
              <div class="smartentranceGuradCoverRate">
                <div id="monitoringEcharts" style="width: 30%; height:100%;display: inline-block;"></div>
                <div class="guadualChangeColor">
                  <div class="entranceGuard">
                    <div class="showData">
                      {{entranceGuardAndMonitoring.installedMonitoring}}
                    </div>
                    <div class="showDataTitle">
                      已安装监控
                    </div>
                  </div>
                  <div class="entranceGuard">
                    <div class="showData">
                      {{entranceGuardAndMonitoring.uninstalledMonitoring}}
                    </div>
                    <div class="showDataTitle">
                      未安装监控
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="secondEqipmentSupplyRate">
          <div class="plate2TopTitle3">二次设备供应商占比</div>
          <div id="secondEqipmentSupplyRate" style="width: 100%;height:24vh"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="el-row">
      <!-- 设备表格 -->
      <div class="equipmentTable">

      </div>
    </el-row>
  </div>
</body>

</html>
<script>
  let vm = new Vue({
    el: "#app",
    data () {
      return {
        // 设备统计
        equipmentStatistics: {
          // 在线设备
          onLineEquipment: 301,
          // 离线设备
          offLineEquipment: 10,
          // 一般报警
          commonAlarm: 10,
          // 严重报警
          severity: 8,
        },
        // 门禁和监控
        entranceGuardAndMonitoring: {
          // 门禁
          installedEntranceGuard: 310,
          uninstalledEntranceGuard: 5,
          // 监控
          installedMonitoring: 310,
          uninstalledMonitoring: 500,
        },
      }
    },
    computed: {
      // 智能门禁覆盖率
      entranceGuardRate () {
        let temp = this.entranceGuardAndMonitoring.installedEntranceGuard + this.entranceGuardAndMonitoring.uninstalledEntranceGuard
        let rate = this.entranceGuardAndMonitoring.installedEntranceGuard / temp * 100
        return rate
      },
      // 监控覆盖率
      monitoringGuardRate () {
        let temp = this.entranceGuardAndMonitoring.installedMonitoring + this.entranceGuardAndMonitoring.uninstalledMonitoring
        let rate = this.entranceGuardAndMonitoring.installedMonitoring / temp * 100
        return rate
      },
    },
    mounted () {
      this.getEchartsOfEntranceGuard("entranceGuardEcharts", [
        { value: this.entranceGuardAndMonitoring.installedEntranceGuard, name: '已安装门禁' },
        { value: this.entranceGuardAndMonitoring.uninstalledEntranceGuard, name: '未安装门禁' }
      ], "智能门禁覆盖率", `${this.entranceGuardRate.toFixed(1)}%`, ["#4bc9a3", "#f3f4f6"], "安装率")
      this.getEchartsOfEntranceGuard("monitoringEcharts", [
        { value: this.entranceGuardAndMonitoring.installedMonitoring, name: '已安装监控' },
        { value: this.entranceGuardAndMonitoring.uninstalledMonitoring, name: '未安装监控' }
      ], "智能门禁覆盖率", `${this.monitoringGuardRate.toFixed(1)}%`, ["#4B86FC", "#f3f4f6"], "安装率")
      this.getEchartsOfSecondEquipmentSupplyRate()
    },
    methods: {
      // 门禁 监控
      getEchartsOfEntranceGuard (id, dataApply, name, text, color, text2) {
        var chartDom = document.getElementById(id)
        var myChart = echarts.init(chartDom)
        option = {
          tooltip: {
            trigger: 'item',
            show: true
          },
          // 控制环形图中间的文字或图片
          graphic: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: text,
                textAlign: 'center',
                fill: color[0],
                font: "20px bold"
              }
            },
            {
              type: 'text',
              left: 'center',
              top: '70',
              style: {
                text: text2,
              }
            },
          ],
          series: [
            {
              itemWidth: 27,
              itemHeight: 16,
              startAngle: "240",
              color: color,
              name: name,
              type: 'pie',
              radius: ['90%', '100%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },

              labelLine: {
                show: false
              },
              data: dataApply
            }
          ]
        }
        option && myChart.setOption(option)
      },
      // 二次设备供应商占比
      getEchartsOfSecondEquipmentSupplyRate () {
        var chartDom = document.getElementById("secondEqipmentSupplyRate")
        var myChart = echarts.init(chartDom)
        option = {
          title: {
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '二供设备供应商占比',
              type: 'pie',
              radius: '90%',
              center: ['50%', '50%'],
              data: [
                { value: 30, name: 'Direct' },
                { value: 310, name: 'Email' },
                { value: 274, name: 'Union Ads' },
                { value: 235, name: 'Video Ads' },
                { value: 400, name: 'Search Engine' }
              ].sort(function (a, b) {
                return a.value - b.value
              }),
              roseType: 'radius',
              // 字体颜色
              label: {
                color: '#686B71'
              },
              labelLine: {
                // 线条颜色
                lineStyle: {
                  color: '#80858D'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                // 环形颜色
                color: '#4BC8A4',
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        }
        option && myChart.setOption(option)
      }

    },
  })
</script>